<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-device,initial-scale=1.0"/>
    <link rel="stylesheet" href="Form.css"/>
    <title>Form</title>
</head>
<body>
<div id="wrapper">
    <div id="sidebar">
        <div id="up-section">
             <h2>Unsung heroes</h2>
            <img src="Image/Flint01.jpg"/>
        </div>
        <div id="down-section">
            <h2>Overhyped nonsenes</h2>
            <img src="Image/Flint01.jpg"/>
        </div>
    </div>
    <form id="redemption" method="post">
        <header>
            <h1>Oscar Redemption</h1>
            <h2>Here's your chance to set the record straight:tell us what year the wrong film got nominated ,and which film<b>should</b>have
            received a nod...</h2>
        </header>
        <fieldset id="part-one">
            <legend>About the offending film (part 1of 3)</legend>
            <div>
                <label for="film">The film in question?</label>
                <input id="film" name="film" type="text" plachholder="e.g. king kong" required aria-required="true"/>
            </div>
            <div>
                <label for="search">Search the site...</label>
                <input id="search" name="search" type="text" placeholder="Wyatt Earp" autofocus/>
            </div>
            <div>
                <label for="tel">Telephone (so we can believe you if you're wrong)</label>
                <input id="tel" name="tel" type="tel" placeholder="1-234-546785" autocomplete="off" required aria-required="true"/>
            </div>
            <div>
                <label for="awardWon">Award Won</label>
                <input id="awardWon" name="awardWon" type="text" list="awards"/>
                <datalist id="awards">
                    <select>
                        <option value="Best picture"></option>
                        <option value="Best director"></option>
                        <option value="Best adapted screenplay"></option>
                        <option value="Best original scrrenplay"></option>
                        <option value="Best film"></option>
                    </select>
                </datalist>
            </div>
            </fieldset>
            <fieldset id="part-two">
            <div>
                <label for="email">Your email address</label>
                <input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required aria-required="true"/>
            </div>
            <div>
                <label for="year of crime">Year of crime</label>
                <input id="year of crime" name="year of crime" type="number" min="1929" max="2017" required aria-required="true"/>
            </div>
            <div>
                <label for="web">Your web address</label>
                <input id="web" name="web" type="url"placeholder="www.mysite.com"  required aria-required="true"/>
            </div>
            <div>
                <label for="tel">Telephone(so we can berate you if you're wrong)</label>
                <input id="tel" name="web" type="tel"placeholder="1-235-5678" autocomplete="off"  required aria-required="true"/>
            </div>
            <div>
                <label for="search">Search the site...</label>
                <input id="search" name="search" type="search" placeholder="Wyatt Earp"/>
            </div>
        </fieldset>
        <fieldset is="part-three">
            <legend>About you</legend>
            <div>
                <label for="name">Your name</label>
                <input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA-Z]{3,30}" placeholder="Dwight Schultz" required aria-required="true"/>
            </div>
            <div>
                <label for="color">Your favorite color</label>
                <input id="color" name="color" type="color"/>
            </div>
        </fieldset>
        <fieldset id="part-four">
            <legend>About time</legend>
            <div>
            <label for="date">Time</label>
            <input id="date" type="date" name="date"/>
            </div>
            <!--其它时间类型
            <label>month
            <input id="month" type="month" name="month"/></label>
            <label>week
            <input id="week" type="week" name="week"/></label>
            <label>time
            <input id="time" type="time" name="time"/></label>
            <label>datetime
            <input id="datetime" type="datetime" name="datetime"/></label>
            <label>howYouRateIt
            <input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5"/></label>
        </fieldset>
        -->
            <div>
                <label for="range-01">How you rate it?</label>
                <input id="range-01" type="range" name="range" min="1" max="10" value="5"/>
            </div>
            </fieldset>
        <input id="submit" type="submit" value="SUBMIT REDEMPTION" name="submit"/>
    </form>
</div>

</body>
</html>
